<template>
	<div class="video_clip_container">
		<clip-source>
			<div ref="clipSource" slot-scope="{ list }">
				<video-item v-for="(item, index) in list" :data-id="item.id" :data="item"></video-item>
			</div>
		</clip-source>
		<clip-content @confirm="handleConfirmClip">
			<div slot="delete" class="delete" ref="clipDelete" :style="{ zIndex: deleteIndex }"></div>
			<div slot="list" class="list" ref="clipHandle" :style="{ width: listWidth }"></div>
		</clip-content>
	</div>
</template>

<script>
import videoItem from './item';
import clipMixins from './clip';
import clipSource from './source';
import clipContent from './content';
export default {
	mixins: [clipMixins],
	components: { clipSource, clipContent, videoItem },
	data() {
		return {
			checkedData: {}
		};
	},
	watch: {
		listWidth(val) {
			console.log(val);
		}
	},
	mounted() {
		// this.queryAttachList();
	},
	methods: {
		handleSelectedData(data) {
			this.checkedData = { ...data };
		},

		handleConfirmClip() {
			console.log(this.sortableHandle.toArray());
		}
	}
};
</script>

<style lang="scss" scoped>
@import './clip.scss';
</style>
